<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=542914
-->
<head>
  <title>Test for Bug 542914</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=542914">Mozilla Bug 542914</a>
<p id="display">
  <input type="text" id="a" value="test">
  <input type="text" id="b">
  <input type="text" id="c">
</p>
<div id="content" style="display: none">
  
</div>
<pre id="test">
<script type="application/javascript">

/** Test for Bug 542914 **/
SimpleTest.waitForExplicitFinish();
function runTests(callback, type) {
  var a = $("a");

  // Test that the initial value of the control is available to script
  // without initilization of the editor
  is(a.value, "test", "The value is available before initialization");
  // Initialize the editor
  a.focus();
  // Test that the value does not change after initialization
  is(a.value, "test", "The value does not change after initializtion");

  var b = $("b");

  // Test that the initial value is empty before initialization.
  is(b.value, "", "The value is empty before initialization");
  // Make sure that the value can be changed before initialization
  b.value ="some value";
  is(b.value, "some value", "The value can be changed before initialization");
  // Initialize the editor
  b.focus();
  // Make sure that the value does not change after initialization
  is(b.value, "some value", "The value does not change after initialization");
  // Make sure that the value does not change if the element is hidden
  b.style.display = "none";
  document.body.offsetHeight;
  is(b.value, "some value", "The value does not change while hidden");
  b.style.display = "";
  document.body.offsetHeight;
  b.focus();
  is(b.value, "some value", "The value does not change after being shown");

  var c = $("c");

  // Make sure that the control accepts input events without explicit initialization
  is(c.value, "", "Control is empty initially");
  c.focus();
  sendChar("a");
  is(c.value, "a", "Control accepts input without explicit initialization");
  // Make sure that the control retains its caret position
  c.focus();
  c.blur();
  c.focus();
  sendChar("b");
  is(c.value, "ab", "Control retains caret position after being re-focused");

  var d = document.createElement("input");
  d.setAttribute("type", type);
  $("display").appendChild(d);
  document.body.offsetHeight;

  // Make sure dynamically injected inputs work as expected
  is(d.value, "", "Dynamic control's initial value should be empty");
  d.value = "new";
  d.focus();
  is(d.value, "new", "Dynamic control's value can be set before initialization");
  sendChar("x");
  is(d.value, "newx", "Dynamic control accepts keyboard input without explicit initialization");
  $("display").removeChild(d);
  is(d.value, "newx", "Dynamic control retains value after being removed from the document");

  callback();
}

var gPreviousType = "text";
function setTypes(aType) {
  var content = document.getElementById("display");
  content.innerHTML = content.innerHTML.replace(gPreviousType, aType);
  gPreviousType = aType;
}

addLoadEvent(function() {
  ok(true, "Running tests on <input type=text>");
  runTests(function() {
    ok(true, "Running tests on <input type=password>");
    setTypes("password");
    runTests(function() {
      ok(true, "Running tests on <input type=tel>");
      setTypes("tel");
      runTests(function() {
        SimpleTest.finish();
      }, "tel");
    }, "password");
  }, "text");
});

</script>
</pre>
</body>
</html>
